<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String base = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path
			+ "/";
%>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>综合情况</title>
<jsp:include page="../include.jsp"></jsp:include>
<script type="text/javascript">
	function refreshCS(type) {
		cs_type = type;
		var tr_data = $("#" + type + "_tab tbody tr");
		$.getJSON("cs/" + type, function(data) {
			$.each(data, function(i, item) {
				var obj = jQuery.parseJSON(item.value);
				tr_data.empty();
				append_tr(type, obj, item);
			});
		});
	}
	function append_tr(type, obj, item) {
		$("#" + type + "_tab tbody").append(
				"<tr data-ip='"+obj.ip+"'><td>" + obj.locale + "</td><td>"
						+ obj.ip + "</td><td>" + item.score + "</td></tr>");
	}
	//列表

	function refreshCSList() {
		var tr_data = $("#cs_list_tab tbody tr");
		$.getJSON("cs/list", function(data) {
			$.each(data, function(i, item) {
				var obj = jQuery.parseJSON(item.value);
				tr_data.empty();
				append_cs_list_tr(obj, item);
			});
		});
	}
	function append_cs_list_tr(obj, item) {
		$("#cs_list_tab tbody").append(
				"<tr data-ip='"+obj.ip+"'><td>" + obj.country+"  "+obj.ip + "</td><td>"
						+ obj.type + "</td><td>" + obj.company + "</td><td>" + obj.province + "</td><td>" + obj.industry + "</td><td>" + item.score + "</td></tr>");
	}
</script>
</head>
<body>
	<div class="row">
		<div class="col-md-16 col-lg-4" id="main"
			style="width: 500px; height: 300px"></div>
		<div class="col-lg-6 col-md-16">
			<ul id="myTab" class="nav nav-tabs">
				<li class="active"><a href="#WEB" data-toggle="tab"
					onclick="refreshCS('web')"> WEB攻击源</a></li>
				<li><a href="#DDOS" data-toggle="tab"
					onclick="refreshCS('ddos')">DDOS攻击源</a></li>
				<li><a href="#IPS" data-toggle="tab" onclick="refreshCS('ips')">IPS攻击源</a></li>
				<li><a href="#APT" data-toggle="tab" onclick="refreshCS('apt')">APT攻击源</a></li>
			</ul>
			<div id="myTabContent" class="tab-content">
				<div class="tab-pane fade in active" id="WEB">

					<table class="table table-striped" id="web_tab">
						<thead>
							<tr>
								<th>IP</th>
								<th>城市</th>
								<th>次数</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
				<div class="tab-pane fade" id="DDOS">
					<table class="table table-striped" id="ddos_tab">
						<thead>
							<tr>
								<th>IP</th>
								<th>城市</th>
								<th>次数</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
				<div class="tab-pane fade" id="IPS">
					<table class="table table-striped" id="ips_tab">
						<thead>
							<tr>
								<th>IP</th>
								<th>城市</th>
								<th>次数</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
				<div class="tab-pane fade" id="APT">
					<table class="table table-striped" id="apt_tab">
						<thead>
							<tr>
								<th>IP</th>
								<th>城市</th>
								<th>次数</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	<!-- 攻击列表开始 -->
	<div>


		<table class="table table-bordered" id="cs_list_tab">
			<thead>
				<tr>
					<th>攻击来源</th>
					<th>攻击类型</th>
					<th>受攻击者</th>
					<th>受攻击省份</th>
					<th>受攻击行业</th>
					<th>次数</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>




	</div>
	<!-- 攻击列表结束 -->
	<script type="text/javascript">
		var cs_type = "web";
		function cs_pie() {
			// 基于准备好的dom，初始化echarts图表
			var typePie = echarts.init(document.getElementById('main'));
			//请求数据
			$.getJSON("cs/csPie", {}, function(data) {
				typePie.setOption(data, true); // 第二个参数表示不和原先的option合并
				typePie.hideLoading();
			});
		}
		//进入页面刷新
		refresh_page();
		//任务
		$(document).ready(function() {
			setInterval("refresh_page()", 5000)
		});
		function refresh_page() {
			cs_pie();
			refreshCS(cs_type);
			refreshCSList();
		}
	</script>
</body>